.hierarchical-locations-view {
    height: 100%;
    display: flex;

    &__resizable {
        min-width: 6rem;
    }

    &__list {
        flex: 1;
        border-right: 1px solid var(--border-color);
        width: 100%; // necessary to prevent border-right from shrinking as width narrows
        overflow-y: auto;
    }

    &__item {
        flex: none;

        display: flex;
        justify-content: space-between;
        align-items: center;

        &-name {
            margin-right: 0.5rem;
            display: flex;
            align-items: center;

            min-width: 0;

            &-text {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                direction: rtl;
            }
        }
        &-badge {
            opacity: 0.8;
        }
    }

    &__content {
        flex: 1;
        width: 100%;
    }

    .theme-redesign & {
        overflow-x: hidden;

        &__content {
            margin-right: -1rem;
        }

        &__resizable {
            padding: 0.5rem;
            overflow-y: auto;

            &:first-child {
                padding-left: 0;
            }

            &:last-of-type {
                margin-right: 0.5rem;
            }

            .resizable__handle {
                border-right: 1px solid var(--border-color-2);
                margin: 0;
                margin-right: 0.5rem;
                width: 0;
                padding-left: 0.5rem;
                transition: opacity 150ms;

                &:hover {
                    opacity: 1;
                }
            }
        }

        &__list {
            border-right: none;
            // Move overflow-y to the parent element to avoid cutting down box-shadow on focus.
            overflow-y: visible;
            overflow-x: hidden;
        }

        &__item {
            border-radius: var(--border-radius);
            font-size: 0.75rem;
            line-height: (16/12);
            border: none;
            outline: none;

            &:focus-visible {
                // Show item outline over the active item background instead of cutting it.
                z-index: 2;
            }

            &-badge {
                opacity: 1;
                color: var(--primary);
            }

            &.active {
                background-color: var(--primary);
                margin-top: 0;

                &:hover {
                    color: var(--light-text);
                }

                .hierarchical-locations-view__item-badge {
                    color: var(--light-text);
                }
            }
        }
    }
}
